.entete{width: 100%;
    height: 550PX;
    filter: brightness(60%);
    
  }
  
  .logo{position: absolute;
    width: 30%;
  height: 40%;
  margin-top: -40%;
  margin-left: 35%;
  z-index: 1;
  }
  .textelogo {position:absolute;
    color:white;
  margin-top: -300PX;
  margin-left: 25%;
  width: 50%;
  text-align: center;
  z-index: 1;
  font-size: 18PX;}

  button{background-color: #33ceff;
    margin-top: -180PX;
    margin-left: 43%;
    position: absolute;
    color: white;
    width: 15%;
    height: 40PX;
    border-style: none;}
  
  .numero{color: black;
  font-size: 16px;}
  .num{position: absolute;
  margin-left: 2%;
  margin-top: -536PX;
  width: 20%;
  z-index: 2;
  }
  .adresse{color: black;
  font-size: 16px;}
  .adr{position: absolute;
  color:wheat;
  font-size: 5PX;
  margin-left: 80%;
  margin-top: -536PX;
  width: 20%;
  z-index: 2;
  }

  .titre{color:orange;
    font-weight: 700;
  font-size: 21PX;}
  .page{position: absolute;
    width: 45%;
    text-align: start;
    margin-left: 28%;
  margin-top: -80px;
  color:white;
  background: rgb(45,222,253);
background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
  opacity: 1;
  border-radius: 20px;
  font-size: 30PX;
  font-weight: 700;}

  h2{font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 16PX;
    text-align: center;}
  
  .accroche{margin-top: 24PX;
    text-align:start;
  font-size: 16PX;
  color:white;
  font-weight: -600;
  margin-left: 2%;}
  
  
  .navbar{ 
  margin-top: -550PX;
  position: fixed;
  margin-left: 0%;
  height: 50px;
  width: 100%;
  z-index: 1;}
  .navbar-nav .nav-link.active{ color:#33ceff;}
  
  .collapse{justify-content: center;}
  .navbar-nav > li > a{font-size: 20PX;
    font-weight: 400;
  margin-left: 20PX;
  color: white;
  }
  
  
  .conteneur1{display: flex;
  justify-content: space-around;} 
  p{color:orange;
  font-weight: bold;
  font-size: 18PX;
  text-align: center;}
  .rang1{width: 20%;
  height: 270PX;
  margin-top: 170PX;
  border-bottom: solid 3PX;
  
}
  
  .texte{color:black; 
    font-size: 18px;
    font-weight: 500;
  text-align:center
;}


.pot{width:30%;
  margin-left: 35%;}
  .carrosserie{margin-top: -30PX;
    width: 50%;
  margin-left: 25%;}

  .bombepeinture{width:30%;
    margin-left: 35%;
  margin-top: -5%;}


footer{width: 100%;
  height: 345PX;
  background: rgb(242,164,9);
  background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
  margin-top: 0px;
  position: absolute;
  margin-top: 260px;}
  
  .logofooter{width: 15%;
  margin-left: 43%;}
  .facebook{margin-top: 40PX;
    margin-left: -60PX;}
  
  
  .textefooter{text-align: center;
    color: black;
  font-weight: 400;
  font-size: 16PX;}

  .mention{position: absolute;
    color: white;
  margin-left: 35%;
margin-top: 10PX;}

  .politique{position: absolute;
    color: white;
    margin-left: 47%;
    margin-top: -15PX;
  }

  .buttonfooter{margin-top:100px;
    background-color: #33ceff;
    position: absolute;
    color: white;
    width: 15%;
    height: 40PX;
    border-style: none;
    margin-left: 42%;}


  

  @media screen and (min-width: 300px) and (max-width: 650px){

    header{margin-top: -180px; }
    .entete{height: 400PX;}
    img.entete{ height:385PX;}
    .logo{margin-top: -46%;
      margin-left: 32%;
    width: 35%;
  height: 70px;}
  .textelogo{font-size: 10PX;
  margin-top: -28%;
  font-weight: bold;}
 
.navbar{margin-top: -100px;
  margin-left: -55%;
  position: fixed;
z-index: 1; }
.navbar-collapse{display: flex;
margin-left: 55%;
margin-top: 0%;
background-color: orange;}
.navbar-toggler{color: orange;
height: 42px;
width: 52PX;
margin-left: 52%;}
.navbar-toggler-icon{background-color: aliceblue;}

   
   
    .buttonheader{margin-top: -15%;
    width: 30%;
  height: 25PX;
  margin-left: 36%;
  font-size: 10PX;}
  
  
  .page{width: 90%;
  height: 30%;
  margin-left: 6%;
  margin-top: -20px;}

  .accroche{font-size: 13px;}

  .titre{color:orange;
    font-weight: 700;
  font-size: 20px;}
    .conteneur1{flex-direction: column;
    text-align: center;
  margin-top: 150px;} 
      .p{color:black;
      font-weight: bold;
      font-size: 20PX;
      text-align: center;} 
      .rang1{width: 60%;
        height: 250PX;
        margin-top: 70PX;
      margin-left: 20%;}
        .texte{color:black; 
        font-size: 16px;
        font-weight: 600;}
        


        .pot{width:30%;
          margin-left: 10%;}
          .carrosserie{width: 40%;
          margin-left: 4%;}
          .bombepeinture{width:30%;
          margin-left: 4%;}

          .buttonfooter{margin-top:120px;
            background-color: #33ceff;
            position: absolute;
            color: white;
            width: 40%;
            height: 40PX;
            border-style: none;
            margin-left: 32%;}

          footer{width: 100%;
            height: 258PX;
            background: rgb(242,164,9);
            background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
             position: absolute;
            margin-top: 295px;}
            
            .logofooter{width: 25%;
            margin-left: 39%;} 
            
            .textefooter{margin-left: 3%;
              font-size: 13PX;}
              .textefooter{font-size: 13PX;}
              .mention{margin-left: 25%;
                font-size: 10PX;} 
              .politique{font-size: 10px;
              margin-left: 55%;}  
            }
            

          
  @media(min-width:1000px){
   .navbar{background: rgb(242,164,9);
    background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%); }
                                                    }
                                                    
                                                    @media screen and (min-width: 651px) and (max-width: 1023px){ 
                                                      .entete{width: 100%;
                                                        height: 400PX;
                                                        filter: brightness(60%);
                                                        }
                                                      
                                                        .logo{position:absolute;
                                                          width: 22%;
                                                        height: 14%;
                                                        margin-top: -50%;
                                                        margin-left: 40%;
                                                        z-index: 1;
                                                        }
                                                      
                                                        .textelogo {position:absolute;
                                                          color:white;
                                                        margin-top: -250PX;
                                                        margin-left: 25%;
                                                        width: 50%;
                                                        text-align: center;
                                                        z-index: 1;
                                                        font-size: 14PX;
                                                      font-weight: 700;}
                                                      
                                                      
                                                      .buttonheader{background-color: #33ceff;
                                                      margin-top: -180PX;
                                                      margin-left: 43%;
                                                      position: absolute;
                                                      color: white;
                                                      width: 18%;
                                                      height: 30PX;
                                                      border-style: none;
                                                    font-size: 14PX;}
                                                      
                                                      .paiement{position: absolute;
                                                        width: 16%;
                                                      margin-top: -295px;
                                                      margin-left: 75%;
                                                      z-index: 1;
                                                      rotate: 12deg;}
                                            
                                                      .navbar{margin-top: -290px;
                                                        margin-left: -48%;
                                                        position: fixed;
                                                    z-index: 1; }
.navbar-collapse{display: flex;
margin-left: 40%;
margin-top: 0%;
background-color: orange;}
.navbar-toggler{color: orange;
height: 42px;
width: 52PX;                                                   
margin-left: 50%;}
.navbar-toggler-icon{background-color: aliceblue;}  

.page{position: absolute;
  width: 70%;
  text-align: start;
  margin-left: 16%;
margin-top: -80px;
color:white;
background: rgb(45,222,253);
background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
border-radius: 20px;
font-size: 30PX;
font-weight: 700;}

.conteneur1{display: flex;
  flex-flow: wrap;} 
  p{color:orange;
  font-weight: bold;
  font-size: 22PX;
  text-align: center;}
  .rang1{width: 45%;
  height: 250PX;
  margin-top: 140PX;
  border: solid 3PX;
border-color: aliceblue;
border-radius: 20px;

 

  
}
  
  .texte{color:black; 
    font-size: 18px;
    font-weight: 500;
  text-align:center
;}


.pot{width:30%;
  margin-left: 35%;}
  .carrosserie{margin-top: -30PX;
    width: 50%;
  margin-left: 40%;}

  
  .buttonfooter{margin-top:120px;
    background-color: #33ceff;
    position: absolute;
    color: white;
    width: 42%;
    height: 40PX;
    border-style: none;
    margin-left: 32%;}

  .mention{position: absolute;
    color: white;
  margin-left: 25%;
margin-top: 10PX;}

  }

  @media screen and (min-width: 1300PX){
    .entete{
      width: 100%;
      height: 750PX;
      filter: brightness(60%);
      }
    
       .logo{position:absolute;
        width: 30%;
      height: 40%;
      margin-top: -34%;
      margin-left: 36%;
      z-index: 1;
      }
    
      .textelogo {position:absolute;
        color:white;
      margin-top: -280PX;
      margin-left: 26%;
      width: 50%;
      text-align: center;
      z-index: 1;
      font-size: 18PX;
    font-weight: 700;}
  
    
  
  
  .buttonheader{background-color: #33ceff;
    
  margin-top: -160PX;
  margin-left: 44%;
  position: absolute;
  color: white;
  width: 13%;
  height: 40PX;
  border-style: none;
  z-index: 1;}
  
  .paiement{position: absolute;
    width: 14%;
  margin-top: -395px;
  margin-left: 73%;
  z-index: 1;
  rotate: 12deg;}
  
  .numero{color: black;
    font-size: 16px;}
    .num{position: absolute;
    margin-left: 3%;
    margin-top: -736PX;
    width: 20%;
    z-index: 2;
    }
    .adresse{color: black;
    font-size: 16px;}
    .adr{position: absolute;
    color:wheat;
    font-size: 5PX;
    margin-left: 80%;
    margin-top: -736PX;
    width: 20%;
    z-index: 2;
    }
  
  .navbar{ 
    margin-top: -750PX;
    position: fixed;
    margin-left: 0%;
    height: 50px;
    width: 100%;
    z-index: 1;
    }
  
    .navbar-nav .nav-link.active{ color:#33ceff;}
  
  .collapse{justify-content: center;
  color:#33ceff;}
  .navbar-nav > li > a{font-size: 20PX;
    font-weight: 600;
  margin-left: 20PX;
  color: white;
  }
  .page{position: absolute;
    width: 50%;
    text-align: start;
    margin-left: 25%;
  margin-top: -80px;
  color:white;
  background: rgb(45,222,253);
  background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
  border-radius: 20px;
  font-size: 30PX;
  font-weight: 700;}
  
  h2{font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 18PX;
  margin-left: 5%;}
  
  .accroche{margin-top: 24PX;
    text-align:center;
  font-size: 20PX;
  color:white;
  font-weight: -600;
  margin-left: 2%;}
  .rang1{width: 45%;
  height: 260PX;}
  
  
  footer{width: 100%;
    height: 398PX;
    background: rgb(242,164,9);
    background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
    position: absolute;
    margin-top: 277px;}}  
                                        
     @media only screen 
  and (min-device-width: 1440px) 
  and (max-device-width: 1440px) 
  and (min-device-height: 900px) 
  and (max-device-height: 900px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
 


 .logo{margin-top: -42%;}

  .conteneur1{margin-top: 10%;}
.rang1{width: 20%;
  height: 270PX;}
}